<template>
  <div class="app-container">
    <el-form :model="form" label-width="80px" :rules="formRules" ref="form" class="demo-ruleForm">
      <!--认证人手机号、认证人昵称、认证人职位、认证人期限、-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="expertPhone" label="手机号">
            <el-input placeholder="请输入认证用户手机号" v-model.trim="form.expertPhone" auto-complete="off" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertNickName" label="昵称">
            <el-input placeholder="请输入认证用户昵称" v-model="form.expertNickName" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertPositions" label="职位">
            <el-input placeholder="请输入认证用户职位" v-model="form.expertPositions" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertStatus" label="状态">
            <el-radio-group v-model="form.expertStatus">
              <el-radio v-model="form.expertStatus" :label="0">未发布</el-radio>
              <el-radio v-model="form.expertStatus" :label="1">发布</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!--专家头像、音频简介、音频简介文字、音频播放时长-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="expertPersonalDescriptionVideo" label="音频">
            <el-upload
              class="upload-demo"
              action="/api/cms/common/uploadFile"
              :on-success="handleDescriptionAudioUploadSuccess"
              :file-list="form.expertPersonalDescriptionVideo"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertPersonalDescriptionVideoTime" label="时长">
            <el-input placeholder="如有音频文件，请输入播放时长" v-model="form.expertPersonalDescriptionVideoTime" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertPersonalDescription" label="简介">
            <el-input placeholder="如有音频文件，请输入对应文字" v-model="form.expertPersonalDescription" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertHeadImage" label="头像">
            <el-upload
              class="avatar-uploader"
              action="/api/cms/common/uploadFile"
              :show-file-list="false"
              :on-success="handleHeadImageUploadSuccess">
              <img v-if="form.expertHeadImage" :src="form.expertHeadImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <!--提问价格、回答价格、追问次数、展示顺序-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="expertAskPrice" label="提问价格">
            <el-input placeholder="提问价格" v-model="form.expertAskPrice" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertShowPrice" label="展示价格">
            <el-input placeholder="展示价格" v-model="form.expertShowPrice" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertAdditionalCount" label="追问次数">
            <el-input placeholder="追问次数" v-model="form.expertAdditionalCount" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="expertShowIndex" label="展示顺序">
            <el-input placeholder="展示顺序" v-model="form.expertShowIndex" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--认证事件、审核状态-->
      <el-row :gutter="0">
        <el-col :span="12">
          <el-form-item prop="expertCreateTime" label="认证时间">
            <el-date-picker placeholder="请输入该专家认证的时间" v-model="form.expertCreateTime" class="filter-item" auto-complete="off" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="expertTimeOut" label="认证期限">
            <el-date-picker placeholder="请输入用户认证期限" v-model="form.expertTimeOut" class="filter-item" auto-complete="off" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!--专家简介-->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item prop="expertIntroduction" label="专家简介">
            <el-input placeholder="专家简介" v-model="form.expertIntroduction" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--专家介绍页-->
      <el-row :gutter="0">
        <el-col :span="24">
          <vue-ueditor-wrap v-model="form.expertIntroductionHtml" :config="pageData.editorConfig"></vue-ueditor-wrap>
        </el-col>
      </el-row>
      <!--保存按钮-->
      <el-row :gutter="0">
        <el-form-item>
          <el-button type="primary" @click.native.prevent="handleSaveButtonClick('form')">保存数据</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsProfessorData,updateCmsProfessorData } from "@/api/customer";
  export default {
    name: "save",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          editorConfig: {
            autoHeightEnabled: false,// 编辑器不自动被内容撑高
            initialFrameHeight: 240,// 初始容器高度
            initialFrameWidth: '100%'// 初始容器宽度
          },// 编辑器配置
        },// 页面配置数据
        form:{
          expertId: "",
          expertPhone: "",
          expertNickName: "",
          expertPositions: "",
          expertStatus: 0,
          expertPersonalDescriptionVideo: [],// 音频的个人介绍
          expertPersonalDescriptionVideoTime: "",// 音频的播放时长
          expertPersonalDescription: "",// 文字的个人介绍
          expertHeadImage: "",
          expertAskPrice: 0,
          expertShowPrice: 0,
          expertAdditionalCount: 1,
          expertShowIndex: 0,
          expertCreateTime: "",
          expertTimeOut: "",
          expertIntroduction: "",
          expertIntroductionHtml: ""
        },// 页面表单
        formRules: {
          expertPersonalDescriptionVideoTime: [
            { required: false, validator:(rule, value, callback) => {
                if (this.form.expertPersonalDescriptionVideo.length > 0 && value === "") {
                  this.$message.warning("请输入认证用户的平台登录手机号");
                  callback(new Error("请输入认证用户的平台登录手机号"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ],
          expertNickName: [
            { required: true, validator:(rule, value, callback) => {
                if (value === "") {
                  this.$message.warning("请输入认证用户的平台登录手机号");
                  callback(new Error("请输入认证用户的平台登录手机号"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ],
          expertHeadImage: [
            { required: true, validator:(rule, value, callback) => {
                if (value === "") {
                  this.$message.warning("请输入认证用户的平台登录手机号");
                  callback(new Error("请输入认证用户的平台登录手机号"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ],
          expertAskPrice: [
            { required: true, validator:(rule, value, callback) => {
                const regular = /^[0-9]\d*$/ //正数（包括小数)
                // regular.test(str) 与 regluar 正则是否匹配
                if (!regular.test(value)) {
                  this.$message.warning("提问价格只支持不包含0的正整数");
                  callback(new Error("提问价格只支持不包含0的正整数"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ],
          expertShowPrice: [
            { required: true, validator:(rule, value, callback) => {
                const regular = /^[1-9]\d*$/ //正数（包括小数)
                // regular.test(str) 与 regluar 正则是否匹配
                if (!regular.test(value) || value < this.expertAskPrice) {
                  this.$message.warning("展示价格需大于等于提问价格");
                  callback(new Error("展示价格需大于等于提问价格"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ],
          expertAdditionalCount: [
            { required: true, validator:(rule, value, callback) => {
                const regular = /^[1-9]\d*$/ //正数（包括小数)
                // regular.test(str) 与 regluar 正则是否匹配
                if (!regular.test(value)) {
                  this.$message.warning("追问次数必须为正整数");
                  callback(new Error("追问次数必须为正整数"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ],
          expertShowIndex: [
            { required: true, validator:(rule, value, callback) => {
                const regular = /^[1-9]\d*$/ //正数（包括小数)
                // regular.test(str) 与 regluar 正则是否匹配
                if (!regular.test(value)) {
                  this.$message.warning("展示顺序必须为正整数");
                  callback(new Error("展示顺序必须为正整数"));
                } else {
                  callback();
                }
              },trigger: "blur" }
          ]
        },// 表单验证
        responseData: {},// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 事件函数
      handlePageInit(){
        this.loadCmsProfessorData();
      },// 初始化页面数据
      handleHeadImageUploadSuccess(response){
        this.form.expertHeadImage = response.data;
      },// 专家头像上传成功
      handleDescriptionAudioUploadSuccess(response){
        this.form.expertPersonalDescriptionVideo[0] = response.data;
      },// 音频介绍上传成功
      handleSaveButtonClick(){
        if (PermissionsToDetectFormUser(getPermission(), "510003")){
          this.$confirm('是否更新当前专家的认证信息, 请核对后继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 进行数据保存
            this.updateCmsProfessorData(this.form);
          }).catch(close => {
            console.log(close);
            this.$message.info("已取消操作");
          });
        }  else {
          this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
        }
      },// 保存按钮点击事件
      // 接口
      loadCmsProfessorData(){
        let param = {expertId: this.form.expertId};
        loadCmsProfessorData(param).then(response => {
          if (response.code === "200"){
            this.form = response.data;
            if (this.form.expertPersonalDescriptionVideo !== ""){
              let array = [];
              let model = {
                name: this.form.expertPersonalDescriptionVideo,
                url: this.form.expertPersonalDescriptionVideo
              };
              array.push(model);
              this.form.expertPersonalDescriptionVideo = array;
            }
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 获取专家修改页数据
      updateCmsProfessorData(){
        if (this.form.expertCreateTime !== ""){
          let data = new Date(this.form.expertCreateTime);
          this.form.expertCreateTime = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate();
        }
        if (this.form.expertTimeOut !== ""){
          let data = new Date(this.form.expertTimeOut);
          this.form.expertTimeOut = data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate();
        }
        if (this.form.expertPersonalDescriptionVideo.length > 0){
          this.form.expertPersonalDescriptionVideo = this.form.expertPersonalDescriptionVideo[0].url;
        } else {
          this.form.expertPersonalDescriptionVideo = "";
        }
        updateCmsProfessorData(this.form).then(response => {
          if (response.code === "200"){
            this.$message.success("保存成功");
            this.$jump.push({path: "/customer/professor"});
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      _this.form.expertId = _this.$route.query.expertId;
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
